
<div>
    <div class="live_box" ng-repeat="item in vedioData">
        <!--视频-->
        <div class="live_vedio" style="width: 100%">

            <img src="{{item.picSmall||item.picMiddle||item.picBig ||'static/45.png'}}" style="width: 100%;height: 18.66rem" onerror="globalBitmap(this)">

            <!--<a  class="btnPlay">Play/Pause</a>-->
            <div class="vedioLoadingImg"><img src="static/22.png"></div>

            <div class="live_texts">
                <a ng-click="jump('/detailVedio/'+item.fileId)" class="live_tit" style="color: #fff;font-size: 1.6rem;color: #FFF;">{{item.title}}</a>
                <p><span class="live_participate" style="color: #fff">{{item.countClick}}次播放</span></p>
            </div>
            <div class="positionTime">{{item.duration|durationTime}}</div>
        </div>
        <!--ng-click="showVedioListModelImg($event)"预览图片-->
        <div class="live-popup" ng-click="jump('/detailVedio/'+item.fileId)"></div>

        <div class="live_text_footer">
            <span>{{item.publishtime|fomatTime}}</span>
            <span class="liveFooRig2">{{item.source}}</span>
            <span class="liveFooRig"><img src="static/26.png" ><span class="badge liveFooRigPos">{{item.countDiscuss}}</span></span>
        </div>
    </div>
</div>
<script type="text/javascript">
</script>

<style>
    .positionTime{
        position: absolute;
        bottom: 1.0rem;
        right: 1.0rem;
        width: 3.6rem;
        height: 1.6rem;
        line-height: 1.6rem;
        text-align: center;
        color: #fff;
        background-color: rgba(0, 0, 0 ,0.4);
        font-size: 1.2rem;
    }

    .live_vedio{
        position: relative;
    }
   .live-popup{
       width: 100%;
       height: 18.66rem;
       top:0;
       left: 0;
       position: absolute;
       background: #666;
       opacity: 0.2;
   }
    .live_texts{
        position: absolute;
        width: 100%;
        top: 0px;
        padding: 0.8rem 1.333rem;
        bottom: 0px;
        height: 4.4rem;
        /*background: linear-gradient(to top,rgba(0,0,0,0) 8%,rgba(0,0,0,0.34) 40%,rgba(0,0,0,0.44) 47%,rgba(0,0,0,0.65) 95%);*/
        background: linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 10%,rgba(0,0,0,0.09) 20%,rgba(0,0,0,0.14) 30%,rgba(0,0,0,0.19) 40%,rgba(0,0,0,0.24) 50%,rgba(0,0,0,0.29) 60%,rgba(0,0,0,0.34) 70%,rgba(0,0,0,0.39) 80%,rgba(0,0,0,0.44) 90%,rgba(0,0,0,0.49) 98%);

    }
    .vedioLoadingImg{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform:translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
    }
    .vedioLoadingImg img{
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform:scale(0.5);
        -o-transform: scale(0.5);
    }

</style>